.recommend {
  width: 320px;
  margin-top: 1rem;
}
.recommend .top {
  width: 100%;
  background-color: #fff;
}
.recommend .top h3 {
  width: 100%;
  height: 50px;
  border-bottom: solid 1px #eee;
  line-height: 50px;
  font-weight: bold;
  padding: 0 20px;
}
.recommend .top ul {
  max-height: 60px;
  transition: 3s;
}
.recommend .top ul li {
  transition: 1s;
  font-size: 14px;
  padding-bottom: 12px;
  opacity: 0;
}
.recommend .top ul li span {
  margin: 0 2px;
}
.recommend .top ul li :last-child {
  color: #888;
}
.recommend .top ul .active {
  padding-left: 20px;
  opacity: 1;
}
.recommend .top ul li:hover span {
  color: red;
}
.recommend .top .active {
  max-height: 500px;
}
.recommend .bottom {
  width: 100%;
  background-color: #fff;
}
.recommend .bottom h3 {
  width: 100%;
  height: 50px;
  border-bottom: solid 1px #eee;
  line-height: 50px;
  font-weight: bold;
  padding: 0 20px;
}
.recommend .bottom ul {
  transition: 3s;
  max-height: 60px;
}
.recommend .bottom ul li {
  font-size: 14px;
  padding-bottom: 12px;
  display: flex;
  opacity: 0;
  transition: 1s;
  justify-content: space-between;
}
.recommend .bottom ul li :last-child {
  color: #888;
  margin-right: 20px;
}
.recommend .bottom ul .active {
  padding-left: 20px;
  opacity: 1;
}
.recommend .bottom ul li:hover span {
  color: red;
}
.recommend .bottom .active {
  max-height: 500px;
}
